<template>
    <header class="header">
      <h1>todos</h1>
      <input id="toggle-all" class="toggle-all" type="checkbox"  v-model="isAll" >
      <label for="toggle-all"></label>
      <input
        class="new-todo"
        placeholder="输入任务名称-回车确认"
        autofocus
        @keydown.enter="fn"
        v-model="num"
      />
    </header>
  </template>
  
  <script>
  export default {
      props:{
        arr:Array,
      },
   data(){
       return {
           num:''
       }
   },
   methods:{
    fn(){
        if(this.num.trim().length === 0)  return alert('不能输入为空！')
        this.$emit('addFn',this.num)
        this.num = ''
    }
   },
   computed:{
    isAll:{
      set(val){
        this.arr.forEach(item =>item.isDone = val )
      },
      get(){
         return  this.arr.length !== 0 && this.arr.every(item =>item.isDone === true)
      }
  }
   }
  }
  </script>